/**
 * 组件通信的三种方式：
 * 1. 父传子
 * 2. 子传父
 * 3. 兄弟之间
 */

import React, { Component } from 'react';


// 父传子
const Fnc = (props) => {
  console.log(props)
  return (
    <div>
      <h2>{props.abc}</h2>
      <button onClick={props.fna}>改变abc</button>
    </div>
  )
}

// 子传父
class Child extends Component {

  ab = 1000;

  render() {
    console.log(this.props)
    return (
      <div>
        <h3>类子组件</h3>
        <p>{this.props.abc}</p>
        <button onClick={() => {
          this.props.fn(this.ab, 1000000)
        }}>调用父组件传给我的方法</button>
      </div>
    );
  }
}


class Index extends Component {
  state = {
    count: 0,
    abc: 1000
  }

  // 修改abc的方法
  modAbc = () => {
    console.log(this)
    this.setState({
      abc: 2000
    })
  }

  // 改变count的事件处理函数
  add = () => {
    this.setState({
      count: this.state.count + 10
    })
  }

  // 父组件方法 => 回调函数 =》 ajax=》接收数据
  getVal = (a, b) => {
    console.log(a, b)
  }




  render() {
    return (
      <div>
        <h1>组件通信的三种方式</h1>
        <button onClick={this.add}>改变count值</button>
        <hr />
        <Fnc abc={this.state.abc} fna={this.modAbc} count={this.state.count} />
        <hr />
        <Child abc={this.state.abc} fn={this.getVal} />
      </div>
    );
  }
}

export default Index;